<template>
    <div class="export-data">
        <!-- 导出选项部分 -->
        <div class="export-options">
            <div class="header">
                <el-icon>
                    <Expand />
                </el-icon>
                <div>导出选项</div>
            </div>
            <div class="option-group-button">
                <div class="title">
                    <el-icon>
                        <Switch />
                    </el-icon>
                    <div>「吾与点」平台数据格式</div>
                </div>
                <div class="option-item">
                    <el-icon :size="70">
                        <Document />
                    </el-icon>
                    <div>
                        <label class="label">将数据导出为「吾与点」交换数据（JSON）</label>
                        <p>将数据导出为「吾与点」平台的交换数据，可以在「吾与点」平台中导入，也可以在「吾与点」平台中导出。交换数据为 JSON 文本文件，其中包含了实体定义、关系定义、实体实例、关系实例等信息。
                        </p>
                    </div>
                </div>
            </div>
            <div class="option-group-button">
                <div class="title">
                    <el-icon>
                        <MessageBox />
                    </el-icon>
                    <div>序列标注数据格式</div>
                </div>
                <div class="option-items">
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 BIO 格式</label>
                            <p>导出 BIO (又称 IOB2) 格式的数据，它将每个实体的标注分为三种类型：B (Begin)、I (Inside)、O (Outside)。数据为 txt
                                纯文本文件，每一行的文本和标注之间用制表符分隔。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 BIOE 格式</label>
                            <p>导出 BIOE 格式的数据，它将每个实体的标注分为四种类型：B (Begin)、I (Inside)、O (Outside)、E (End)。数据为 txt
                                纯文本文件，每一行的文本和标注之间用制表符分隔。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 BIOES 格式</label>
                            <p>导出 BIOES 格式的数据，它将每个实体的标注分为五种类型：B (Begin)、I (Inside)、O (Outside)、E (End)、S (Single)。数据为
                                txt
                                纯文本文件，每一行的文本和标注之间用制表符分隔。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 BILOU 格式</label>
                            <p>导出 BILOU 格式的数据，它将每个实体的标注分为五种类型：B (Begin)、I (Inside)、L (Last)、O (Outside)、U (Unit)。数据为 txt
                                纯文本文件，每一行的文本和标注之间用制表符分隔。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 BMEWO 格式</label>
                            <p>导出 BMEWO 格式的数据，它将每个实体的标注分为五种类型：B (Begin)、M (Middle)、E (End)、W (Whole)、O (Outside)。数据为 txt
                                纯文本文件，每一行的文本和标注之间用制表符分隔。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="option-group-button">
                <div class="title">
                    <el-icon>
                        <ScaleToOriginal />
                    </el-icon>
                    <div>二维表格数据格式</div>
                </div>
                <div class="option-items">
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为Excel实体列表 (多文件)</label>
                            <p>压缩包中包含多个 Excel表格文件，每个实体对应一个表格文件。每个表格文件包含 3 个字单一的 Excel表格文件。每个表格文件包含 3
                                个字段：序号、实体、实例名称和实例数量。段：序号、实例名称和实例数量，按照实例数量降序排列。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 Excel实体列表 (单文件)</label>
                            <p>单一的 Excel表格文件。每个表格文件包含 4 个字段：序号、实体、实例名称和实例数量。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为CSV 实体列表 (多文件)</label>
                            <p>压缩包中包含多个CSV文件，每个实体对应一个 CSV文件。每个 CSV文件包含3个字单一的 CSV 文件。每个 CSV文件包含 4
                                个字段：序号、实体、实例名称和实例数量。段：序号、实例名称和实例数量，按照实例数量降序排列。CSV</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为CSV 实体列表 (单文件)</label>
                            <p>单一的 CSV 文件。每个 CSV文件包含 4 个字段：序号、实体、实例名称和实例数量。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="option-group-button">
                <div class="title">
                    <el-icon>
                        <Notebook />
                    </el-icon>
                    <div>其他工具数据格式</div>
                </div>
                <div class="option-items">
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 Brat 格式</label>
                            <p>导出标注的 Brat Collection 数据，可以直接导入 Brat。数据为 tar.gz 格式的压缩文件，包含
                                .txt、.ann、annotation.conf、visual.conf 四个文件。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 Doccano 格式</label>
                            <p>导出 Doccano 序列标注项目的数据集与标签数据，可以直接导入 Doccano。数据为 zip 格式的压缩文件，包含
                                dataset.jsonl、label_config.span.json、label_config.relation.json 三个文件。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 Gephi 格式 (CSV)</label>
                            <p>导出 CSV 格式的 Gephi 数据，可以直接导入 Gephi。数据为 zip 格式的压缩文件，包含 Nodes.csv、Edges.csv 两个文件，分别对应 Nodes
                                Table 和 Edges Table。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 Gephi 格式 (Excel XLSX)</label>
                            <p>导出 Spreadsheet 格式的 Gephi 数据，可以直接导入 Gephi。数据为 zip 格式的压缩文件，包含 Nodes.xlsx、Edges.xlsx
                                两个文件，分别对应 Nodes Table 和 Edges Table。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 ECharts 格式</label>
                            <p>导出标注的 ECharts 配置项数据，可以直接作为 ECharts 的 option 使用。数据为 JSON 文件。</p>
                        </div>
                    </div>
                    <div class="option-item">
                        <el-icon :size="70">
                            <Document />
                        </el-icon>
                        <div>
                            <label class="label">将数据导出为 ArcGIS 格式</label>
                            <p>ArcGIS 是一款地理信息系统软件，可以用于制作地图。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <DocumentInfo />
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import DocumentInfo from './DocumentInfo.vue'
export default defineComponent({
    components: {
        DocumentInfo
    }
})
</script>

<style scoped>
.label {
    font-size: medium;
}

.export-data {
    display: flex;
}

.export-data>div:nth-child(1) {
    flex: 4;
}

.export-data>div:nth-child(2) {
    flex: 1;
}

.export-options {
    height: 610px;
    overflow-y: auto;
    background-color: #f5f5f5;
    margin-top: 20px;
    border-radius: 10px;
    margin-right: 10px;
    margin-left: 20px;
    padding: 10px;
    text-align: left;
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-weight: bold;
}

.title {
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.option-group-button {
    flex-wrap: wrap;
    gap: 10px;
}

.option-item {
    display: flex;
    flex-direction: row;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #f5f5f5;
    width: calc(50% - 10px);
    font-size: smaller;
    min-height: 70px;
    transition: background-color 0.3s ease;
    align-items: center;
    box-sizing: border-box;
}

.option-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.icon {
    height: 50px;
    width: 50px;
    margin-right: 10px;
    align-self: center;
}

.label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.option-item label {
    font-weight: bold;
}

.option-item p {
    margin-top: 5px;
}

.option-item:hover {
    background-color: #e0e0e0;
}
</style>
